<template>
    <div>
        <el-descriptions
            :column="2"
            size="medium"
            border
            :labelStyle="{ 'white-space': 'nowrap', width: '100px' }"
        >
            <el-descriptions-item label="账号">{{
                row.username
            }}</el-descriptions-item>
            <el-descriptions-item label="昵称">{{
                row.nickname
            }}</el-descriptions-item>
            <el-descriptions-item label="头像">
                <el-image
                    style="width:50px;height:50px;"
                    :src="row.avatar"
                    :preview-src-list="[row.avatar]"
                ></el-image>
            </el-descriptions-item>
            <el-descriptions-item label="邮箱">{{
                row.email
            }}</el-descriptions-item>
            <el-descriptions-item label="手机号">{{
                row.mobile
            }}</el-descriptions-item>
            <el-descriptions-item label="权限组">
                <el-tag
                    type="default"
                    style="margin:0 5px"
                    v-for="(item, index) in row.group_name_arr"
                    :key="index"
                    >{{ item }}</el-tag
                >
            </el-descriptions-item>
        </el-descriptions>
        <el-row type="flex" justify="center" style="margin-top:30px">
            <el-button type="primary" icon="el-icon-check" @click="onConfirm"
                >完成({{ current + 1 }}/{{ selection.length }})</el-button
            >
            <el-button type="default" icon="el-icon-close" @click="onCancel"
                >取消</el-button
            >
        </el-row>
    </div>
</template>

<script>
export default {
    name: "file-detail",
    props: {
        selection: {
            type: Array,
            default: () => []
        }
    },
    computed: {
        row() {
            return this.selection[this.current]?.admin || {};
        }
    },
    data() {
        return {
            current: 0
        };
    },
    methods: {
        onConfirm() {
            if (this.current === this.selection.length - 1) {
                this.$parent.$emit("update:visible", false);
            } else {
                this.current += 1;
            }
        },
        onCancel() {
            this.$parent.$emit("update:visible", false);
        }
    }
};
</script>